<!--
 * @Author: your name
 * @Date: 2020-08-11 10:28:22
 * @LastEditTime: 2020-08-13 15:59:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /topline-admin-yezi/src/views/home/publishArticle/index.vue
-->
<template>
  <div class="publish-article">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb
          separator-class="el-breadcrumb__separator el-icon-arrow-right"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            >{{ $route.query.id ? '编辑' : '发布' }}文章</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="form-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <quillEditor
              ref="myQuillEditor"
              v-model="form.content"
              :options="editorOption"
            ></quillEditor>
          </el-form-item>
          <el-form-item label="封面" prop="cover">
            <el-radio-group v-model="form.cover.type">
              <el-radio :label="1">单图</el-radio>
              <el-radio :label="3">三图</el-radio>
              <el-radio :label="0">无图</el-radio>
              <el-radio :label="-1">自动</el-radio>
            </el-radio-group>
            <div class="coverUpload">
              <el-image
                :class="{ isUpload: form.cover.images[0] }"
                v-show="form.cover.type === 1 || form.cover.type === 3"
                :src="form.cover.images[0] || img"
                style="width: 150px; height: 150px"
                fit="fill"
                @click="$refs.hmDialog.showDialog = true"
              />
              <el-image
                :class="{ isUpload: form.cover.images[1] }"
                v-show="form.cover.type === 3"
                :src="form.cover.images[1] || img"
                style="width: 150px; height: 150px"
                fit="fill"
                @click="$refs.hmDialog.showDialog = true"
              />
              <el-image
                :class="{ isUpload: form.cover.images[2] }"
                v-show="form.cover.type === 3"
                :src="form.cover.images[2] || img"
                style="width: 150px; height: 150px"
                fit="fill"
                @click="$refs.hmDialog.showDialog = true"
              />
            </div>
          </el-form-item>
          <el-form-item label="频道" prop="channel_id">
            <el-select
              v-model="form.channel_id"
              placeholder="请选择"
              :clearable="true"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >发表</el-button
            >
            <el-button @click="submitForm('form', true)">存入草稿</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <hmDialog ref="hmDialog" @got-image="onGotData"></hmDialog>
  </div>
</template>

<script>
// API
import { addArticle, getChannelList, getArticleById } from '@/api/article'
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 组件
import hmDialog from './dialog'

// img
const img = require('@/assets/default.png')

export default {
  components: {
    quillEditor,
    hmDialog
  },
  data () {
    return {
      img: img,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic'], // 字体样式
            ['blockquote', 'code-block'], //
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        },
        placeholder: ''
      },
      form: {
        channel_id: '',
        content: '',
        cover: {
          type: 0,
          images: []
        },
        title: ''
      },
      rules: {
        channel_id: [
          { required: true, message: '请选择频道', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, message: '最少20个字', trigger: 'blur' }
        ],
        cover: [
          { required: true, message: '请上传图片', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.type > 0) {
                if (this.form.cover.images.length === 0) {
                  return callback(new Error('请上传图片'))
                }
                callback()
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
        ]
      },
      channelList: []
    }
  },
  methods: {
    onGotData (image) {
      this.form.cover.images.push(image)
    },
    submitForm (formName, draft = false) {
      this.$refs[formName].validate(valid => {
        if (!valid) return
        // 判定一次type，根据type来 传cover个数

        const data = this.form
        data.cover.type = +data.cover.type

        if (data.cover.type > 0) {
          data.cover.images = data.cover.images.slice(0, data.cover.type)
        } else {
          this.form.cover.images = []
        }
        addArticle(data, { draft }).then(res => {
          this.$router.push('/content')
        })
      })
    }
  },
  async created () {
    /**
     * 判定有没有id
     * true => 获取文章数据
     */
    if (this.$route.query.id) {
      const res = await getArticleById(this.$route.query.id)

      this.form = {
        channel_id: res.data.data.channel_id,
        content: res.data.data.content,
        cover: res.data.data.cover,
        title: res.data.data.title
      }
    }
    // 获取channel_id
    const res = await getChannelList()
    this.channelList = res.data.data.channels.map(item => {
      return {
        value: item.id,
        label: item.name
      }
    })
  }
}
</script>

<style lang="less">
.publish-article {
  .quill-editor {
    .ql-toolbar {
      padding: 0;
      padding-left: 8px;
    }

    .ql-container {
      height: 300px;
    }
  }

  .coverUpload {
    display: flex;

    > div {
      box-sizing: border-box;
      width: 150px;
      height: 150px;
      margin-right: 24px;
      border: 1px dashed #ccc;

      &.isUpload {
        border: none;
      }
    }
  }
}
</style>
